import Ux from "ux";
import Ex from 'ex';
import {Button, Col, Row, Tabs} from 'antd';
import React from 'react';

import HxMenu from '../HxMenu/UI';
import Op from './Op';

const HI = {
    HxMenu,
}

const renderHeader = (reference) => {
    const title = Ux.fromHoc(reference, "title");
    const {$inited = {}} = reference.props;
    const {data = {}} = $inited;
    return (
        <Row className={"role-header"}>
            <Col span={3} className={"role-title"}>
                {title.name}
            </Col>
            <Col span={3}>
                {data.name}
            </Col>
            <Col span={3} className={"role-title"}>
                {title.code}
            </Col>
            <Col span={3}>
                {data.code}
            </Col>
            <Col span={3} className={"role-title"}>
                {title['admit']}
            </Col>
            <Col span={3}>
                {Ux.aiYN(data['power'])}
            </Col>
        </Row>
    )
}
const renderAction = (reference) => {
    const {
        $activeKey,
        $regions = [],
        $refresh,
        $loading = false,
    } = reference.state;
    const region = Ux.elementUnique($regions, 'key', $activeKey);
    const {config: {webAction}} = region;
    if (webAction) {
        const {text, ...buttonAttrs} = webAction;
        const attrs = Ux.clone(buttonAttrs);
        attrs.disabled = !$refresh;
        attrs.onClick = Op.rxConnect(reference);
        attrs.loading = $loading;           // 防止重复加载
        return (
            <Button {...attrs}>
                {text}
            </Button>
        )
    } else return false;
}
const renderPage = (reference) => {
    const {$regions = [], $activeKey} = reference.state;

    const tabAttrs = {};
    tabAttrs.size = "small";
    tabAttrs.className = "role-tab";
    tabAttrs.onTabClick = Op.rxTabClick(reference)
    tabAttrs.tabBarExtraContent = renderAction(reference);
    tabAttrs.activeKey = $activeKey;
    return (
        <Row>
            <Tabs {...tabAttrs}>
                {$regions.map(region => {
                    const {ui} = region;
                    const Component = HI[ui];
                    // 属性处理
                    const inherit = Ex.yoAmbient(reference);
                    Object.assign(inherit, Ex.aclAdmit(reference, region));
                    inherit.rxLoading = ($loading = true) =>
                        // 加载完成 -> $refresh = false
                        reference.setState({$loading, $refresh: false});
                    return (
                        <Tabs.TabPane tab={region.label} key={region.key}>
                            {Component ? (
                                <Component {...inherit}/>
                            ) : false}
                        </Tabs.TabPane>
                    )
                })}
            </Tabs>
        </Row>
    )
}
export default {
    renderHeader,
    renderPage,
}